<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习页面</title>
<!--    引入vue-->
    <script type="application/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{title}}</h1>
    <h1 v-text="text" v-on:click="fun01"></h1>
    <!--    使用v-on-->
    <button v-on:click="fun01">按钮01</button>
    <button @click="fun02">按钮02</button>
    <br/>


    <ul>

        <li v-for="(item , index) in items">{{item.name}}</li>
    </ul>
    <button @click="flag = !flag">按钮03</button>
    <h1 v-if="flag">嘎嘎</h1>

    <h1 v-show="!flag">个人个人</h1>
<!--    v-model-->
    <input v-model="inputText">

</div>
<script>
    //创建vue实例
    let app = new Vue({
        //挂载点 #app 找到id为app的页面元素
        el:"#app",
        //定义变量的区域 vdatat
        data() {
            return{
                title : "vue学习",
                text:"使用指令",
                items: [
                    {
                        id:1,
                        name:"张三1"
                    },
                    {
                        id:2,
                        name:"张三2"
                    },
                    {
                        id:3,
                        name:"张三3"
                    },
                    {
                        id:4,
                        name:"张三4"
                    },
                ],
                flag:false,
                inputText:"456",
            }
        },
        methods: {

            fun01() {
                //控制台打印输出
                console.log("方法01调用")
                //弹窗
                alert("方法01调用")
            },
            fun02() {
                //控制台打印输出
                console.log("方法01调用")
                //弹窗
                alert("方法01调用")
            }
        },
    })
</script>

</body>
</html>